<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">待审核变更申请</h3>
                  <div class="box-tools pull-right">
                    <!-- <el-button type="success" @click="showQuery">
                              <i class='fa fa-search'>高级查询</i>
                            </el-button >
                            <el-button type="primary" @click='()=>isExport = true'>
                              <i class='fa fa-cloud-download'>导出当前结果</i>
                            </el-button> -->
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="approvals">
                    <div class="row">
                      <el-table stripe :sort-change="sortChanged" :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="approvals" border style="width: 100%">
                        <el-table-column fixed type='index' label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column fixed="right" label="操作" width="320">
                          <template scope="scope">
                            <el-button type="success" @click="view(scope.row)">
                              <i class="fa fa-eye">查 看</i>
                            </el-button>
                            <el-button type="primary" v-if="hasRole(2)" @click="editRow(scope.row)">
                              <i class="fa fa-edit">审 核</i>
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title='变更详情' v-if="viewVisible" :before-close="()=>viewVisible = false" :visible.sync="viewVisible" top='10px' width="80%" :modal="false" size="small">
      <Diff v-if='viewVisible' ref='diffCtrl' @viewDataChanged="onViewDataChanged" :dffers='differs'></Diff>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title='用户信息' v-if="viewUserVisible" :before-close="()=>viewUserVisible = false" :visible.sync="viewUserVisible" top='10px' width="80%" :modal="false" size="large">
      <UserDataView v-if='viewUserVisible' :editable='false' ref='userView' :userData='selectedUser'></UserDataView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewUserVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog title='人事月报信息' v-if="viewStateVisible" :before-close="()=>viewUserVisible = false" :visible.sync="viewUserVisible" top='10px' width="80%" :modal="false" size="large">
      <MonthStatView v-if='viewUserVisible' :editable='false' ref='monthStatView' :monthData='selectedUser'></MonthStatView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewStateVisible = false">关 闭</el-button>
      </span>
    </el-dialog> -->

    <el-dialog title='审核处理' v-if='editVisible' :visible.sync="editVisible" :before-close="() => editVisible = false" :modal="false" size="large">
      <ApproveHandle :editable='true' v-if='editVisible' ref='ApproveHandleEdit' :approval='selectedApproval'></ApproveHandle>
      <span slot="footer" class="dialog-footer">
        <el-button @click="()=>editVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='人事基础信息' :visible.sync="viewbaseInfoVisible" :before-close="()=>viewbaseInfoVisible = false" top='10px' width="80%" :modal="false" size="large">
      <UserInfo :editable='false' v-if='viewbaseInfoVisible' ref='userView' :userInfo='data'></UserInfo>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewbaseInfoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
        <el-dialog title='人事补充信息' :visible.sync="viewextraInfoVisible" :before-close="()=>viewextraInfoVisible = false" :modal="false" size="full">
            <ExtraInfo ref='extraView' :editable='false' v-if='viewextraInfoVisible' :extrainfo='data'></ExtraInfo>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewextraInfoVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='在职进修学历(学位)教育' :visible.sync="viewcontinueTrainVisible"  :before-close="()=>viewcontinueTrainVisible = false" :modal="false" size="large">
            <FurtherEdu :editable='false' v-if='viewcontinueTrainVisible' ref="furtherEdu" v-bind:educations="data"></FurtherEdu>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewcontinueTrainVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='年度考核管理' :visible.sync="viewannualAssessmentVisible" :before-close="()=>viewannualAssessmentVisible = false"  :modal="false" size="large">
            <KPI  ref='kpiView' v-if='viewannualAssessmentVisible' :editable='false' :kpis='data'></KPI>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewannualAssessmentVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='查看专业技能管' :visible.sync="viewtechnicalPositionVisible" :before-close="()=>viewtechnicalPositionVisible = false" :modal="false" size="large">
            <ProfessionTech v-if='viewtechnicalPositionVisible' :editable='false' ref='view' :professionTechs="data"></ProfessionTech>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewtechnicalPositionVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='参与工程项目建设情况管理' :visible.sync="viewprojectsVisible" :before-close="()=>viewprojectsVisible = false" :modal="false" size="large">
            <Project :editable='false' v-if='viewprojectsVisible' ref='race' :projects='data'></Project>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewprojectsVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='参加活动(竞赛)情况管理' :visible.sync="viewtakePartVisible" :before-close="()=>viewtakePartVisible = false"  :modal="false" size="large">
            <Race ref='race' v-if='viewtakePartVisible' :editable='false' :races='data'></Race>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewtakePartVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='家庭及主要社会关系' :visible.sync="viewsocialReltaionVisible" :before-close="()=>viewsocialReltaionVisible = false" :modal="false" size="large">
            <Social ref='socialView' :editable='false' :relations='data'></Social>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewsocialReltaionVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='在职培训' :visible.sync="viewonlineWorkVisible" :before-close="()=>viewonlineWorkVisible = false" :modal="false" size="large">
            <Training ref="trainingView" v-if='viewonlineWorkVisible' :editable='false' v-bind:trainings="data"></Training>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewonlineWorkVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title='月报数据' width="80%" :visible.sync="viewhrinput" :before-close="()=>viewhrinput = false" :modal="true" >
            <hrinput v-if="viewhrinput" ref="hrinput" :hrData='hrdata' :enable='false'/>
            <!-- <Training ref="trainingView" v-if='viewonlineWorkVisible' :editable='false' v-bind:trainings="data"></Training> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewhrinput = false">关 闭</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import approveUtils from "../../common/approveUtils";
import Utils from "../../common/utils";
import Diff from "../mycomponents/approve/Diff";
import hrinput from "./reports/hrinput";
import ApproveHandle from "../mycomponents/approve/ApproveHandle";
import UserDataView from "./UserDataView";
import UserInfo from "../mycomponents/users/UserInfo";
import Training from "../mycomponents/users/Training";
import ExtraInfo from "../mycomponents/users/ExtraInfo";
import Social from "../mycomponents/users/Social";
import FurtherEdu from "../mycomponents/users/FurtherEdu";
import ProfessionTech from "../mycomponents/users/ProfessionTech";
import Race from "../mycomponents/users/Race";
import Project from "../mycomponents/users/Project";
import KPI from "../mycomponents/users/KPI";
let approveUtil = new approveUtils();
let util = new Utils();
export default {
  name: "Approvals",
  components: {
    ApproveHandle,
    UserDataView,
    Diff,
    UserInfo,
    ExtraInfo,
    Social,
    Training,
    FurtherEdu,
    ProfessionTech,
    Race,
    Project,
    KPI,
    hrinput
  },
  data: function() {
    return {
      name: "",
      userInfo: {},
      extrainfo: {},
      parttimeEdus: [],
      kpis: [],
      professionTechs: [],
      projects: [],
      races: [],
      relations: [],
      trainings: [],
      data: null,
      viewhrinput: false,
      viewbaseInfoVisible: false,
      viewextraInfoVisible: false,
      viewcontinueTrainVisible: false,
      viewannualAssessmentVisible: false,
      viewtechnicalPositionVisible: false,
      viewprojectsVisible: false,
      viewtakePartVisible: false,
      viewsocialReltaionVisible: false,
      viewonlineWorkVisible: false,
      viewUserVisible: false,
      editVisible: false,
      viewVisible: false,
      columns: approveUtil.getCloumns(),
      emptyText: "空",
      id: "id",
      approvals: [],
      total: 1,
      selectedApproval: null,
      selectedUser: util.getDefaultSelectedUser(),
      differs: null,
      hrdata: {}
    };
  },
  created: function() {
    this.$nextTick(() => {
      this.getApprovals();
    });
  },
  methods: {
    getEmptyText() {
      return "空";
    },
    showQuery() {
      this.queryVisible = true;
    },
    view(row) {
      console.log("view data:" + JSON.stringify(row));
      this.getApproval(row.id);
      this.process();
      this.showViewDlg();
    },
    showViewDlg() {
      if (this.selectedApproval.type === 0) {
        this.viewUserVisible = true;
      } else if (this.selectedApproval.type === 1) {
        this.viewVisible = true;
      } else if(this.selectedApproval.type === 5){
         this.viewhrinput = true;
      }
    },
    process() {
      if (this.selectedApproval) {
        // 新增用户
        if (this.selectedApproval.type === 0) {
          let dbData = JSON.parse(this.selectedApproval.content);
          this.selectedUser.data.id = dbData.id;
          this.selectedUser.data.kpis = dbData.annualAssessment;
          this.selectedUser.data.professionTechs = dbData.technicalPosition;
          this.selectedUser.data.parttimeEdus = dbData.continueTrain;
          this.selectedUser.data.trainings = dbData.onlineWork;
          this.selectedUser.data.relations = dbData.socialReltaion;
          this.selectedUser.data.extrainfo = dbData.otherInfo;
          this.selectedUser.data.userInfo = dbData.baseInfo;
          this.selectedUser.data.projects = dbData.projects;
          this.selectedUser.data.races = dbData.takePart;
          this.differs == null;
        } else if (this.selectedApproval.type === 1) {
          // 变更用户
          const differs = JSON.parse(this.selectedApproval.differs);
          let showDiffers = [];
          for (let index in differs) {
            if (!differs.hasOwnProperty(index)) {
              console.log("index not found:" + index);
              return;
            }

            differs[index]['name'] = this.selectedApproval["personName"];

            if (!(differs[index].field === "otherInfo" ||
                differs[index].field === "resume" ||
                differs[index].field === "parttimeEdus" ||
                differs[index].field === "extrabaseinfo")
            ) {
              showDiffers.push(differs[index]);
            }
          }
          console.log("differs:" + JSON.stringify(showDiffers));
          this.differs = showDiffers;
        } else if (this.selectedApproval.type === 5) {
          debugger;
          this.hrdata = JSON.parse(this.selectedApproval.content);
        } else {
          // 删除用户
          var that = this;
          var userId = this.selectedApproval.content;
          util.getUserData(
            userId,
            response => {
              util.parseData(response.body.body, that.selectedUser.data, that);
              that.viewUserVisible = true;
            },
            response => {
              that.showErrorInfo("加载数据失败,请重试!" + response);
            }
          );
        }
      }
    },
    editRow(row) {
      console.log("edit data:" + JSON.stringify(row));
      this.getApproval(row.id);
      this.process();
      this.editVisible = true;
    },
    sortChanged(sortProp) {
      //this.queryData.orders.fields = sortProp.prop
      //this.queryData.orders.desc = sortProp.order
    },
    getApproval(id) {
      for (let index in this.approvals) {
        if (!this.approvals.hasOwnProperty(index)) {
          break;
        }

        if (this.approvals[index].id === id) {
          this.selectedApproval = this.approvals[index];
          break;
        }
      }
      if (!this.selectedApproval) {
        this.showErrorInfo("数据不存在，请刷新!");
      }
    },
    getApprovals() {
      var that = this;
      approveUtil.getUserApprovals(
        response => {
          if (response.body.result === 1) {
            console.log(
              "get approvals data id " + JSON.stringify(response.body)
            );
            that.approvals = response.body.body;
          } else if (response.body.result === 2) {
            that.showErrorInfo("权限不够,请联系管理员!");
          }
        },
        response => {
          console.log("get approvals failed:" + response.data);
          that.showErrorInfo("网络异常,请稍后重试!");
        }
      );
    },
    showSucInfo(info) {
      this.$message({
        message: info,
        type: "info"
      });
    },
    showErrorInfo(info) {
      this.$message({
        message: info,
        type: "error"
      });
    },
    hasRole(role) {
      return (this.$store.state.user.role.roles & role) === role;
    },
    onViewDataChanged(data) {
      console.log("view data changed:" + JSON.stringify(data));
      this.data = data.data;
      this[data.propName] = true;
    },
    submit() {
      var approval = this.$refs.ApproveHandleEdit.getData();
      var that = this;
      if (approval) {
        if (approval.state === 1) {
          approveUtil.agree(
            approval,
            response => {
              if (response.body.result === 1) {
                that.editVisible = false;
                that.showSucInfo("操作成功!");
                that.getApprovals();
              } else {
                that.showErrorInfo("操作失败,请稍后重试!");
              }
            },
            response => {
              that.showErrorInfo("操作失败,请稍后重试!" + response);
            }
          );
        } else {
          approveUtil.reject(
            approval,
            response => {
              if (response.body.result === 1) {
                that.editVisible = false;
                that.showSucInfo("操作成功!");
                that.getApprovals();
              } else {
                that.showErrorInfo("操作失败,请稍后重试!");
              }
            },
            response => {
              that.showErrorInfo("操作失败,请稍后重试!" + response);
            }
          );
        }
      }
    }
  }
};
</script>

<style>
</style>
